<template>
  <div class="home">
    <p ref="pcon">{{ msg }}</p>
    <button @click="changeMsg">改变Msg数据</button>
  </div>
</template>

<!-- setup新写法 -->
<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, nextTick } from 'vue';
// 当前ref变量,获取对应名称的DOm元素
let pcon = ref(null);

let msg = ref('小王');
let changeMsg = () => {
  msg.value = '修改后的数据';
  // 也可以使用nextTick在方法中获取更新后的DOM元素
  nextTick(() => {
    console.log(pcon.value.innerHTML);
  })
}

let interId = setInterval(() => {
  console.log('定时器执行');
}, 1000);

onBeforeMount(() => {
  console.log('挂载前');
  // 获取不到DOM元素
  console.log(pcon.value);
})
onMounted(() => {
  console.log('挂载后');
  // 获取到DOM元素
  console.log(pcon.value);
})
onBeforeUpdate(() => {
  console.log('更新前');
  console.log(pcon.value.innerHTML);
})
onUpdated(() => {
  console.log('更新后');
  console.log(pcon.value.innerHTML);

})
// 销毁全局事件,清除定时器等,off自定义事件
onBeforeUnmount(() => {
  console.log('卸载前');
  clearInterval(interId)
})
onUnmounted(() => {
  console.log('卸载后');
})

</script>
